<template>
  <div class="detail">
    <back></back>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in detail.pics2" :key="index">
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="count">
      <h5>{{ detail.basicInfo?.name }}</h5>
      <p>{{ detail.basicInfo?.characteristic }}</p>
      <section>
        <p>
          <span>低价￥{{ detail.basicInfo?.minPrice }}</span>
          <span>&#x3000;原价￥{{ detail.basicInfo?.originalPrice }}</span>
        </p>
        <span>库存{{ detail.basicInfo?.stores }}</span>
      </section>
    </div>
    <tab-cut @cut="tabCut"></tab-cut>
    <div v-if="showExt" v-html="detail.content"></div>
    <div v-else style="background: #fff">
      <van-empty description="暂无数据" />
    </div>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-action-bar-icon icon="cart-o" text="购物车" />
      <van-action-bar-icon
        :icon="star ? 'star' : 'star-o'"
        :text="star ? '已收藏' : '收藏'"
        color="#ff5000"
        @click="star = !star"
      />
      <van-action-bar-button type="warning" text="立即购买" />
      <van-action-bar-button type="danger" text="加入购物车" @click="show=true"/>
    </van-action-bar>
    <van-popup
      v-model:show="show"
      closeable
      close-icon="close"
      position="bottom"
    >
    <div class="pop-top">
      <img :src="detail.basicInfo?.pic" alt="">
      <section>
        <p>{{detail.basicInfo?.name}}</p>
        <p style="color:red">￥{{detail.basicInfo?.minPrice}}</p>
      </section>
    </div>
    <ul class="pop-center">
       <li v-for="(item,index) in detail.properties" :key="index">
          <h5>{{item.name}}</h5>
          <ol>
            <li v-for="(n,i) in item.childsCurGoods" :key="i" :class="{active: checkIds.some(it => it == n.id)}" @click="check(n,index)">{{n.name}}-{{index}}</li>
          </ol>
       </li>
    </ul>
    <div class="pop-foot">
      <span>购买数量</span>
      <van-stepper v-model="buyNum" />
    </div>
    <van-button block type="danger">加入购物车</van-button>
    </van-popup>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import { getDetail } from "../../api/secendPage/index";
import tabCut from "../../components/tabCut.vue";
import Back from "../../components/back.vue";
export default {
  components: { tabCut, Back },
  setup() {
    const route = useRoute();
    // console.log(route.query);
    // console.log(route.params.id);
    let id = route.params.id;
    const data = reactive({
      detail: {}, // 详情的数据
      showExt: true, // 商品介绍
      star: false, // 是否收藏
      show: false, // 控制规格选择是否显示
      buyNum: 1, // 购买的数量
      checkIds: [], // 选中的规格的id
    });
    getDetail({ id: id }).then((res) => {
      // console.log(res);
      data.detail = res.data;
    });

    const tabCut = (val) => {
      //    data.showExt = val == 0? true : false;
      // 在使用运算符运算的时候，0 会被转换成false 除了0之外的其他数字都是true
      data.showExt = !val;
    };

    const check = (val,i) => { // 选择规格触发的函数
       data.checkIds[i] = val.id;
    }
    return {
      ...toRefs(data),
      tabCut,
      check
    };
  },
};


// let arr = [];
// arr[0] = 5;
// arr[1] = 6;
// console.log(arr);
</script>
<style lang="scss" scoped>
.detail {
  height: 100%;
  background: #e9e9e9;
  .van-swipe-item img {
    width: 100%;
    height: 375px;
  }
  .count {
    background: #fff;
    padding: 10px;
    font-size: 12px;
    h5 {
      font-size: 16px;
      margin: 10px 0;
    }
    & > p {
      margin: 10px 0;
      color: #b8b8b8;
    }
    section {
      display: flex;
      justify-content: space-between;
      color: #b8b8b8;
      p > span:first-child {
        color: red;
        font-size: 14px;
      }
    }
  }
}
.pop-top{
  background: #fff;
  padding: 10px;
  display: flex;
  img{
    width: 62px;
    height: 62px;
  }
  section{
    margin-left: 15px;
    flex: 1;
    font-size: 14px;
    p{
      margin-top: 15px;
    }
  }
}
.pop-center{
  background: #fff;
  padding: 10px;
  border-top: 1px solid #ccc;
  &>li{
    font-size: 14px;
    h5{
      line-height: 50px;
    }
    ol{
      display: flex;
      flex-wrap: wrap;
    }
    li{
      padding: 5px 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin: 0 10px 10px 0;
      font-size: 12px;
    }
    .active{
      border-color: red;
    }
  }
}
.pop-foot{
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: #fff;
  font-size: 14px;
  border-top: 1px solid #ccc;
}
</style>